<template>
<div>
  <div class="loader-base" v-if="showLoad"><div class="loader-wrap"></div></div>
  <div class="logo-bg2">
    <img src="@/assets/logo/logo_icon.png">
  </div>
  <ul class="login-wrap">
    <li class="displayflex">
      <span class="iconfont icon-tel"></span>
      <div class="flex1 login-ipt"><input type="tel" placeholder="手机号" v-model="username" ></div>
      <span class="iconfont icon-del" v-if="username" @click="username=''"></span>
    </li>
    <li class="displayflex">
      <span class="iconfont icon-num"></span>
      <div class="flex1 login-ipt"><input type="text" placeholder="验证码" v-model="code"></div>
      <div class="code-box"><button class="get-code" @click="getCode" :disabled="disabledv">{{codeText}}</button></div>
    </li>
    <li class="displayflex">
      <span class="iconfont icon-password"></span>
      <div class="flex1 login-ipt">
        <input type="password" placeholder="密码" v-model="password" v-if="!showPw">
        <input type="text" placeholder="密码" v-model="password" v-if="showPw">
      </div>
      <span class="iconfont icon-eye" :class="{'icon-open-eye':showPw}" @click="changePw"></span>
    </li>
    <!-- <li class="displayflex">
      <span class="iconfont icon-key"></span>
      <div class="flex1 login-ipt"><input type="text" placeholder="推广码" v-model="keynum"></div>
      <span class="iconfont icon-del" v-if="keynum" @click="keynum=''"></span>
    </li> -->
  </ul>
  <div class="btn-w90 mt60">
    <button class="btn btn-default btn-click" @click="sure">注 册</button>
  </div>
  <div class="login-bottom">
    <router-link :to="{ path: '/login'}" class="f-r">去登录</router-link>
  </div>
</div>
</template>
<script>
import md5 from 'js-md5';
export default {
  data(){
    return {
      username:'',
      password:'',
      code:'',
      keynum:'',
      showPw:false,
      codeText:"获取验证码",
      time:60,
      disabledv:false,
      ValidCode:'',
      showLoad: false,
    }
  },
  methods:{
    checkTel(val){
      var reg = /^1[345789]\d{9}$/;
      if(!reg.test(val) || !val){
        this.$vux.toast.show({
          type:'warn',//success, warn, cancel, text
          text: '请填写正确手机号'
        })
        return false;
      }else{
        return true;
      }
    },
    getValidCode(){
      var code = Math.floor(Math.random()*9000)+1000;
      this.ValidCode = code;
      //this.code = code;
      return code;
    },
    getCode(){
      var _this = this,
          timeCount;
      function count(){
        if(_this.time===0){
          clearInterval(timeCount);
          _this.disabledv = false;
          _this.codeText = "获取验证码";
          _this.time = 60;
          return false;
        }
        _this.codeText = _this.time+" 秒后重试";
        _this.time--;
      }
      if(this.checkTel(this.username)){
        this.disabledv = true;
        timeCount = setInterval(count,1000);
        // 请求接口
        var content = '【来誉链享】 您的验证码是：' + _this.getValidCode() + '。如非本人操作，请忽略本短信';
        var query = {
          ContactTel: _this.username,
          Content: content,
        };
        this.Ajax.post('SendMessage', query).then(function(resp) {
          if (resp.IsSuccess) {
            _this.$vux.toast.show({
              type:'success',//success, warn, cancel, text
              text: '验证码已发送，请注意查收'
            })
          }
        });
      }
    },
    changePw(){
      this.showPw = !this.showPw;
    },
    sure(){
      var _this = this;
      if(!this.checkTel(this.username)){
        return false;
      }
      if(!this.code){
        this.$vux.toast.show({
          type:'warn',//success, warn, cancel, text
          text: '请填写验证码'
        })
        return false;
      };
      var pwReg = /^\w{6,}$/,
          pwValue = this.password;
      if(!pwValue || !pwReg.test(pwValue)){
        this.$vux.toast.show({
          type:'warn',//success, warn, cancel, text
          text: '请填写至少6位数字或字母密码'
        })
        return false;
      };
      if(this.code != this.ValidCode){
        this.$vux.toast.show({
          type:'warn',//success, warn, cancel, text
          text: '验证码错误'
        })
        return false;
      }
      //请求接口
      this.showLoad = true;
      var query = {
        LogonUser: this.username,
        Pwd: md5(this.password).toUpperCase(),
        MobileNo: this.username,
        UserBizType:'Driver'
      };
      this.Ajax.post('RegistAccount',query).then(function(resp){
        _this.showLoad = false;
        if(resp.IsSuccess)
        {
          localStorage.clear();
          _this.$vux.toast.show({
            type:'success',//success, warn, cancel, text
            text: '注册完成',
            onHide () {
              _this.$router.push({
                path:'/login'
              });
            }
          });
        } else {
          _this.$vux.toast.show({
            type:'warn',//success, warn, cancel, text
            text: resp.ErrorMessage,
          });
        }
      });
    }
  }
}
</script>